<template>
  <div class="goods" id="goods" name="goods">
    <!-- 面包屑 -->
    <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
        <el-breadcrumb-item>积分商城</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 分类标签 -->
    <div class="nav">
      <div class="product-nav">
        <div class="title">分类</div>
        <el-tabs v-model="activeName" type="card" @tab-click="">
          <el-tab-pane
              v-for="item in tabList"
              :key="item.id"
              :label="item.name"
              :name="''+item.id"
          />
        </el-tabs>
      </div>
    </div>
    <!-- 分类标签END -->

    <!-- 主要内容区 -->
    <div class="main">
      <div class="list">
        <MyPointsGoodsList :list="pointsList" v-if="pointsList.length > 0"></MyPointsGoodsList>
        <div v-else class="none-product">抱歉没有找到相关的积分商品</div>
        <!-- 分页 -->
        <el-pagination
            background
            :current-page="page"
            :page-size="limit"
            :total="total"
            style="padding: 30px 0; text-align: center;"
            layout="total, prev, pager, next, jumper"
            @current-change="getPointsGoods"
        />
      </div>
      <!-- 分页END -->
    </div>
    <!-- 主要内容区END -->

  </div>
</template>

<script>
import pointsMall from "@/api/perimall/pointsMall";

export default {
  name: "PointsMall",
  data() {
    return {
      tabList: [
        {
          id: 1,
          name: '推荐'
        },
        {
          id: 2,
          name: '价格'
        }
      ],
      activeName: '1',
      pointsList: {},  //积分商品数量
      page: 1,  //当前页码
      limit: 10,  // 每页显示的商品数量
      total: 0,  // 商品总量
    }
  },

  activated() {
    this.getPointsGoods()
  },

  methods: {
    getPointsGoods(page = 1) {
      this.page = page
      const params = {
        page: this.page
      }
      pointsMall.getPointsGoodsInfo(params)
      .then(result => {
        const data = result.data
        if (data != null) {
          this.pointsList = {}
          this.pointsList = data.list
          this.total = data.totalCount
        } else {
          this.pointsList = {}
        }
      })
    }
  }
}
</script>

<style scoped>
.goods {
  background-color: #f5f5f5;
}

/* 面包屑CSS */
.el-tabs--card .el-tabs__header {
  border-bottom: none;
}

.goods .breadcrumb {
  height: 50px;
  background-color: white;
}

.goods .breadcrumb .el-breadcrumb {
  width: 1225px;
  line-height: 30px;
  font-size: 16px;
  margin: 0 auto;
}

/* 面包屑CSS END */

/* 分类标签CSS */
.goods .nav {
  background-color: white;
}

.goods .nav .product-nav {
  width: 1225px;
  height: 40px;
  line-height: 40px;
  margin: 0 auto;
}

.nav .product-nav .title {
  width: 50px;
  font-size: 16px;
  font-weight: 700;
  float: left;
}

/* 分类标签CSS END */

/* 主要内容区CSS */
.goods .main {
  margin: 0 auto;
  max-width: 1225px;
}

.goods .main .list {
  /*width: 1000px;*/
  min-height: 650px;
  padding-top: 14.5px;
  margin-left: -13.7px;
  overflow: auto;
}

.goods .main .pagination {
  height: 50px;
  text-align: center;
  margin-bottom: 10px;
}

.goods .main .none-product {
  color: #333;
  margin-left: 13.7px;
}

/* 主要内容区CSS END */

</style>